<?xml version="1.0" encoding="UTF-8"?>
<template>
  <el-dialog
    title="课题列表"
    :visible.sync="visible"
    width="800px"
    :before-close="handleClose">
    <el-table
      :data="ketiList"
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        prop="ketimingcheng"
        label="课题名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="zuoyeyaoqiu"
        label="课题要求">
      </el-table-column>
      <el-table-column
        prop="faburiqi"
        label="发布日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="status"
        label="选题状态"
        width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <!-- 已选状态显示取消课题按钮 -->
          <el-button
            v-if="scope.row.status === '已选'"
            type="danger"
            size="mini"
            @click="handleCancelKeti(scope.row)">
            取消课题
          </el-button>
          <!-- 可选状态显示选择课题按钮 -->
          <el-button
            v-if="scope.row.status === '可选'"
            type="primary"
            size="mini"
            @click="handleSelectKeti(scope.row)">
            选择课题
          </el-button>
          <!-- 不可选状态显示禁用的选择课题按钮 -->
          <el-button
            v-if="scope.row.status === '不可选'"
            type="info"
            size="mini"
            disabled>
            选择课题
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      ketiList: [],
      loading: false,
      courseName: ''
    }
  },
  methods: {
    getStatusType(status) {
      const typeMap = {
        '可选': 'success',
        '已选': 'warning',
        '不可选': 'danger'
      }
      return typeMap[status] || 'info'
    },
    init(courseName) {
      this.visible = true
      this.courseName = courseName
      this.getKetiList()
    },
    async getKetiList() {
      this.loading = true
      try {
        const { data } = await this.$http({
          url: `xueshengxuanke3/list/${encodeURIComponent(this.courseName)}`,
          method: 'get'
        })
        if (data && data.code === 0) {
          this.ketiList = data.data
          // 获取每个课题的状态
          await Promise.all(this.ketiList.map(async (keti) => {
            try {
              const statusRes = await this.$http({
                url: `xueshengxuanke3/get/${keti.id}`,
                method: 'get'
              })
              if (statusRes.data && statusRes.data.code === 0) {
                keti.status = statusRes.data.data
              }
            } catch (error) {
              console.error('获取课题状态失败:', error)
              keti.status = '未知'
            }
          }))
        }
      } catch (error) {
        console.error('获取课题列表失败:', error)
        this.$message.error('获取课题列表失败')
      } finally {
        this.loading = false
      }
    },
    handleClose() {
      this.visible = false
    },
    // 选择课题
    async handleSelectKeti(row) {
      try {
        const { data } = await this.$http({
          url: `xueshengxuanke3/select/${row.id}`,
          method: 'post'
        })
        if (data && data.code === 0) {
          this.$message.success('选择课题成功')
          // 重新获取课题列表和状态
          this.getKetiList()
        } else {
          this.$message.error(data.msg || '选择课题失败')
        }
      } catch (error) {
        console.error('选择课题失败:', error)
        this.$message.error('选择课题失败')
      }
    },
    // 取消课题
    async handleCancelKeti(row) {
      try {
        const { data } = await this.$http({
          url: `xueshengxuanke3/cancel/${row.id}`,
          method: 'post'
        })
        if (data && data.code === 0) {
          this.$message.success('取消课题成功')
          // 重新获取课题列表和状态
          this.getKetiList()
        } else {
          this.$message.error(data.msg || '取消课题失败')
        }
      } catch (error) {
        console.error('取消课题失败:', error)
        this.$message.error('取消课题失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  .el-table {
    margin: 20px 0;
  }
}
</style> 